<template>
    <h4 class="text-center">用户管理</h4>
    <!-- 用户列表 -->
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>等级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in list" :key="index">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.level }}</td>
                <td>
                    <!-- <a>详情</a> -->
                    <router-link :to="'/home/user/' + item.id">详情</router-link> 
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup>
const list = [
    {id: 1, name: '小明', level: '一级客户'},
    {id: 2, name: '小李', level: '一级客户'},
    {id: 3, name: '小刘', level: '二级客户'}
]
</script>

<style scoped>
table {
    border: 1px solid #ccc;
    width: 100%;
    border-collapse: collapse;

    tr {
        th {
            background-color: rgb(247, 191, 124);
            border: 1px solid #ccc;
        }

        td {
            background-color: rgb(205, 235, 225);
            border: 1px solid #ccc;
        }
    }
}
</style>